<template>
  <div style="display:inline-block">
    <div @click="outerVisible=true">
      <slot />
    </div>
    <el-dialog v-if="model=='pc'" :title="title" width="90%" :top="top" :visible.sync="outerVisible">
      <iframe ref="iframe" :src="url" width="100%" :height="height" class="iframe" />
    </el-dialog>
    <el-dialog v-if="model=='mobile'" :title="title" width="415px" :top="top" :visible.sync="outerVisible">
      <iframe ref="iframe" :src="url" width="375px" height="812px" class="iframe" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Dialogifram',
  props: {
    url: { type: String, required: true },
    title: { type: String, default: '第三方网站' },
    model: { type: String, default: 'pc' }
  },
  data() {
    return {
      outerVisible: false,
      height: '500px',
      top: '50px'
    }
  },
  watch: {
  },
  created() {
    this.iframeInit()
  },
  methods: {
    // iframe窗口初始化
    iframeInit() {
      const clientHeight = document.documentElement.clientHeight
      this.height = `${clientHeight * 0.9 - 120}px`
      this.top = `${clientHeight * 0.05}px`
    }
  }
}
</script>
<style scoped>
.iframe {
  border: 0;
  overflow: hidden;
  box-sizing: border-box;
}
</style>
